<!-- 1:canvas是h5新增的一个重要标签，用来绘制图形动画，写一个例子。 -->
<!DOCTYPE html>
<html>
	<head>
		<title>Canvas画布</title>
		<style type="text/css">
			canvas {
				border: 1px solid greenyellow;
			}
		</style>
	</head>
	<canvas id="huabu" width="500" height="300"></canvas>
	</body>
	<script type="text/javascript">
		function draw() {
			var canvas = document.getElementById('huabu');
			if (!canvas.getContext) return;
			var ctx = canvas.getContext("2d");
			ctx.fillStyle = "rgb(200,0,0,0.5)";
			//绘制矩形
			ctx.fillRect(20, 20, 100, 50);

			ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; //r,g,b,a:透明度
			// ctx.fillStyle="blue";
			ctx.fillRect(100, 50, 100, 50);
		}
		draw();
	</script>
</html>
